<template>
  <div class="flow-row">
    <div class="flow-branch">
      <div class="meet-node"></div>
      <div class="flow-col" v-for="(conditionNode, index) in node.conditionNodes" :key="index">
        <div class="clear-left-border" v-if="index == 0"></div>
        <div class="clear-right-border" v-if="node.conditionNodes.length - 1 == index"></div>
        <div class="flow-row">
          <div class="flow-box">
            <div class="flow-item flow-node-branch">
              <div class="flow-branch-suggest">
                <div class="node-name">
                  <span>{{ conditionNode.name }}</span>
                  <span style="margin-left: 10px;">
                    <SvgIcon v-if="index == 0" name="ele-SuccessFilled" :size="20" color="green" />
                    <SvgIcon v-if="node.conditionNodes.length - 1 == index" name="ele-CircleCloseFilled" :size="20" color="red" />
                  </span>
                </div>
                <div v-if="!readable && !conditionNode.deletable" class="close-icon">
                  <SvgIcon  name="ele-CircleClose"  @click.stop="conditionNode.deletable = true" />
                </div>
                <!-- 删除提示 -->
                <DeleteConfirm :node="conditionNode" @callback="delCallback"  v-model="conditionNode.deletable"/>
              </div>
            </div>
            <FlowAddNode :node="node" :nodeType="3" :id="conditionNode.id" :readable="readable" />
          </div>
        </div>
        <FlowNode v-if="conditionNode.childNode && conditionNode.childNode.hasOwnProperty('id')" :node="conditionNode.childNode" :readable="readable" />
      </div>
    </div>
    <div class="after-branch-btn">
      <FlowAddNode :node="node" :nodeType="4" :readable="props.readable" />
    </div>
  </div>
</template>
<script lang="ts" setup name="SuggestNode">
  import FlowNode from '../index.vue';
  import FlowAddNode from '../add/index.vue';
  //import FlowBranchSetting from '../../flowDrawer/Branch/index.vue';
  import DeleteConfirm from '../../common/DeleteConfirm.vue';
  //------------------接收传入参数------------------------
  const props = defineProps({
    node: {
      type: Object,
      default: function() {
        return {};
      },
    },
    readable: {
      type: Boolean,
      default: false,
    },
  });
  const state=reactive({
    isActive: false,
  })
  function  delCallback() {
    let currNode = {
      id: props.node.pid,
    };
    // 将对应的审批节点的添加按钮开启
    $store.flow.UP_NODE( { currNode, field: 'addable', value: true });
  }
</script>
